<template>
    <div class="content">
        <SearchTitle />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <div class="zhTopBox">
                <div class="titleBox">{{ formData.name }}</div>
                <div class="zhTopFlex">
                    <div class="zhTopFlexLeft">
                        <img class="zhTopLeftImg" v-if="formData.fengmian" :src="store.imgfengMian + formData.fengmian" alt="">
                        <div class="zhTopLeftNr">
                            <div class="zhTopLeftNrTitle">
                                <div class="zhTopLeftNrDate">{{ formData.eff_time }}</div>
                                <div class="zhTopLeftNrsj">开馆时间：{{ formData.opening_time }}</div>
                            </div>
                            <div class="dizhiBox">
                                <img class="dizhiIcon" src="/src/assets/icon/地址.png" alt="">
                                <div>{{ formData.address }}</div>
                            </div>
                            <div class="dizhiBox">主办单位：{{ formData.org_name }}</div>
                            <div class="dizhiBox">
                                <div>会展面积：{{ formData.area }}平方</div>
                                <div>展商数量：{{ formData.exhibitors_num }}家</div>
                                <div>容纳人数：{{ formData.seating_capacity }}人</div>
                            </div>
                            <div class="dizhiBox">
                                <div class="biaoqianBox">{{ formData.type }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="zhTopFlexRight">
                        <div class="zhTopRightMs">
                            <div>距离开幕还有</div>
                            <div>
                                <span style="font-weight: bold;font-size: 32px;">{{ formData.eff_day }}</span>
                                <span>天</span>
                            </div>
                        </div>
                        <div class="zhTopRightButton" @click="participatefun">我要参展</div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 10px;">
                <el-tabs v-model="zhjsType" class="custom-tabs demo-tabs">
                    <el-tab-pane label="展会介绍" name="展会介绍">
                        <div class="nrTextFlex" v-html="formData.description"></div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" title="我要参展" width="500">
        <el-form ref="baomingFormRef" :model="baomingForm" :rules="baomingRules">
            <el-form-item label="联系人" label-width="140px" prop="name">
                <el-input v-model="baomingForm.name" autocomplete="off" placeholder="请输入联系人" />
            </el-form-item>
            <el-form-item label="联系电话" label-width="140px" prop="phone">
                <el-input v-model="baomingForm.phone" autocomplete="off" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="人数" label-width="140px" prop="c_ount">
                <el-input-number v-model="baomingForm.c_ount" class="mx-4" :min="1" :max="100" controls-position="right"
                    placeholder="请输入人数" />
            </el-form-item>
            <el-form-item label="类型" label-width="140px" prop="type">
                <el-radio-group v-model="baomingForm.type">
                    <el-radio value="团体">团体</el-radio>
                    <el-radio value="个人">个人</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label-width="140px">
                <el-button type="primary" @click="baomingSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import SearchTitle from '@/components/general/SearchTitle.vue';
import { lcExhibitionsInfosDWGet, lcExhibitionsInfosDW_BaoMingAdd } from '@/api/api.js'
import { useStore } from '@/store/store';
const store = useStore();
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute()
onMounted(() => {
    lcExhibitionsInfosDWGetfun()
})
const zhjsType = ref('展会介绍');
// 详情
const formData = ref({});
const lcExhibitionsInfosDWGetfun = async () => {
    const res = await lcExhibitionsInfosDWGet({
        id: route.query.id
    });
    formData.value = res.result;
};
// 我要参展
const dialogVisible = ref(false);
const baomingForm = ref({
    name: '',
    phone: '',
    c_ount: 1,
    type: '个人',
})
// 校验规则
const baomingRules = ref({
    name: [
        { required: true, message: '请输入联系人', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入有效的手机号码',
            trigger: 'blur'
        }
    ],
    c_ount: [
        { type: 'number', required: true, message: '请选择人数', trigger: 'change' }
    ],
    type: [
        { required: true, message: '请选择类型', trigger: 'change' }
    ]
})
// 参展提交
const baomingFormRef = ref(null);
const baomingSubmit = () => {
    baomingFormRef.value.validate((valid) => {
        if (valid) {
            console.log('提交参数:', baomingForm.value);
            const res = lcExhibitionsInfosDW_BaoMingAdd({
                id: route.query.id,
                ...baomingForm.value
            })
            if (res.code === 200) {
                ElMessage.success('报名成功');
                dialogVisible.value = false;
            } else {
                ElMessage.error(message || '报名失败，请重试');
            }
        } else {
            console.log('表单校验未通过');
        }
    });

}
// 我要参展打开弹窗
const participatefun = () => {
    baomingForm.value = {
        name: '',
        phone: '',
        c_ount: 1,
        type: '个人'
    };
    dialogVisible.value = true;
};
// 返回
const fanhuifun = () => {
    router.go(-1);
};
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    // min-height: calc(100vh - 60px);
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.zhTopBox {
    width: 100%;
    padding: 26px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;

    .titleBox {
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
        margin-bottom: 20px;
    }

    .zhTopFlex {
        display: flex;
        align-items: center;

        .zhTopFlexLeft {
            width: 85%;
            display: flex;
            gap: 20px;

            .zhTopLeftImg {
                width: 260px;
                height: 160px;
                border-radius: 8px;
            }

            .zhTopLeftNr {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                gap: 10px;

                .zhTopLeftNrTitle {
                    display: flex;
                    align-items: center;
                    gap: 15px;

                    .zhTopLeftNrDate {
                        font-weight: bold;
                        font-size: 24px;
                        color: #FFFFFF;
                    }

                    .zhTopLeftNrsj {
                        font-weight: 300;
                        font-size: 12px;
                        color: #FFFFFF;
                        border-radius: 21px;
                        border: 1px solid #FFFFFF;
                        padding: 1px 7px;
                        text-align: center;
                    }
                }

                .dizhiBox {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    color: #FFFFFF;
                    gap: 10px;

                    .dizhiIcon {
                        width: 20px;
                        height: 20px;
                    }

                    .biaoqianBox {
                        font-size: 12px;
                        padding: 1px 3px;
                        color: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid #FFFFFF;
                    }
                }
            }
        }

        .zhTopFlexRight {

            .zhTopRightMs {
                border-radius: 8px;
                border: 1px solid #FFFFFF;
                font-size: 16px;
                color: #FFFFFF;
                padding: 6px 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

            .zhTopRightButton {
                margin-top: 10px;
                border-radius: 8px;
                background: #FFFFFF;
                padding: 8px 24px;
                font-size: 14px;
                color: #949494;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
        }
    }
}



:deep(.custom-tabs) {
    .el-tabs__active-bar {
        background-color: $green-color !important; // 激活状态底部线条
    }

    .el-tabs__item {
        font-weight: bold;
        font-size: 18px;

        &.is-active {
            color: #000;

            &::after {
                background-color: $green-color !important; // 下划线绿色
            }
        }
    }
}
</style>
